<template>
  <div class="container">
    <BackBtn />
    <div class="content">
      <div class="left min-w">
        <el-tree ref="pathTree" :data="treeData" node-key="key" :props="defaultProps" :expand-on-click-node="false"
          :default-expanded-keys="defaultChecked" :check-on-click-node="true" highlight-current
          @node-click="handleNodeClick" />
      </div>
      <div class="right">
        <el-table :data="filesData">
          <el-table-column :label="$t('文件名')" prop="title">
            <template slot-scope="scope">
              <img :src="require(`../icon/${scope.row.type}.png`)" alt="" class="fileIcon" />
              <span class="mg-l pointer" @click="handleNodeClick(scope.row)">
                {{ scope.row.title }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.type != 'path'" @click="getInfo(scope.row)">
                {{ $t('编辑') }}
              </el-button>
              <!-- <el-button
                v-if="scope.row.type != 'path'"
                type="primary"
                icon="el-icon-refresh"
                @click="goRefresh(scope.row)"
              >
                {{ $t('更新') }}
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="mg-t" :current-page="page.currentPage" :page-sizes="page.pageSize" :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
        <OnlineEditor :dialog-show.sync="dialogShow" :editor-content="tempForm.content" :editor-type="fileType"
          :curr-path="currEditorPath" :width="80" />
      </div>
    </div>
  </div>
</template>

<script>
import themeApi from '@/api/theme'
import mouldApi from '@/api/theme'
import md5 from 'md5'
export default {
  data() {
    return {
      fileType: 'html',
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      website_id: '',
      treeData: [],
      defaultChecked: [],
      defaultProps: {
        children: 'child',
        label: 'title'
      },
      path: '',
      filesData: [],
      tableData: [],
      dialogShow: false,
      tempForm: {
        content: '',
        path: ''
      },
      lang: '',
      currEditorPath: ''
    }
  },
  created() {
    this.website_id = this.$route.query.id
    this.lang = this.$route.query.lang
    this.getFilesPath()
  },
  methods: {
    setExpandedKeys(key) {
      this.defaultChecked = [key]
    },
    setCurrentKey(key) {
      this.$refs.pathTree.setCheckedKeys([])
      this.$refs.pathTree.setCheckedKeys([key])
    },
    handleSizeChange(val) {
      this.page.size = val
      this.filesData = this.getFileData(
        this.tableData,
        this.page.currentPage,
        this.page.size
      )
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.filesData = this.getFileData(
        this.tableData,
        this.page.currentPage,
        this.page.size
      )
    },
    getFileData(tableData, currPage, pageSize) {
      return tableData.slice((currPage - 1) * pageSize, currPage * pageSize)
    },
    getFilePath(path, website_id = this.website_id, lang = this.lang) {
      return `${website_id}/${lang}${path}`
    },
    // 更新
    goRefresh(row) {
      const updateForm = {
        path: this.website_id + row.path,
        lang: this.lang,
        website_id: this.website_id
      }
      themeApi.singleUpdate(updateForm).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    handleNodeClick(val) {
      if (val.type == 'file') {
        // 文件直接打开
        this.getInfo(val)
      } else if (val.type == 'path') {
        // 文件夹获取下面的文件
        this.path = '/' + this.website_id + val.path
        this.setExpandedKeys(md5(this.path))
        this.setCurrentKey(md5(this.path))
      } else {
        // 点击左侧树形结构
        this.path = val.path
      }
      this.getFiles(true)
    },
    // 获取文件目录
    getFilesPath() {
      mouldApi
        .allFilePath({ website_id: this.website_id, lang: this.lang })
        .then(res => {
          this.treeData = res.data
          if (res.data.length > 0) {
            this.path = res.data[0].path
            this.setExpandedKeys(md5(res.data[0].path))
            this.setCurrentKey(md5(res.data[0].path))
            this.getFiles()
          }
        })
    },
    // 获取文件
    getFiles(isTable = false) {
      const val = {
        website_id: this.website_id,
        path: this.path,
        lang: this.lang
      }
      mouldApi.allFiles(val).then(res => {
        this.tableData = res.data
        // 从表格点击刷新列表
        if (isTable) {
          this.page.currentPage = 1
        }
        this.filesData = this.getFileData(
          this.tableData,
          this.page.currentPage,
          this.page.size
        )
        this.page.total = res.data.length
      })
    },
    // 源码查看
    getInfo(row) {
      this.tempForm.path = '/' + this.website_id + row.path
      this.fileType = this.getFileExt(row.path)
      this.currEditorPath = this.tempForm.path
      mouldApi.fileRead({ path: this.tempForm.path }).then(res => {
        this.tempForm.content = res.data
        this.dialogShow = true
      })
    },
    getFileExt(path) {
      return path.substr(path.lastIndexOf('.') + 1)
    },
    prev() {
      this.$router.push({ name: 'Theme' })
    }
  }
}
</script>
<style scoped lang="scss">
.mg-l {
  margin-left: 10px;
}

.min-w {
  min-width: 200px;
}

.mg-t {
  margin-top: 10px;
}

.pointer:hover {
  cursor: pointer;
}

.back {
  top: 16px;
  right: 21px;
}

.content {
  margin-top: 36px;
  display: flex;
  justify-content: left;

  .left {
    width: 220px;
    margin-right: 30px;
    background-color: #fff;
    padding: 20px;
  }

  .right {
    width: 100%;
    background-color: #fff;
    padding: 20px;

    .fileIcon {
      width: 17px;
      vertical-align: middle;
    }
  }
}
</style>
